<script setup lang="ts">
import { getCurrentInstance, onBeforeMount, reactive, watchEffect } from 'vue'

const props = defineProps({
  renderTables: {
    type: Array,
    default: () => [],
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})

const vm = getCurrentInstance()

const form = reactive({})

onBeforeMount(() => {
  props.renderTables.forEach((item) => {
    if (item.renderType === 'input' && item.key) {
      vm?.proxy.$set(form, item.key, '')
    }
  })
})

const inputData = (data) => {
  const keys = []
  props.renderTables.forEach((item) => {
    if (item.renderType === 'input' && item.key) {
      keys.push(item.key)
    }
  })
  const result = {}
  keys.forEach((key) => {
    result[key] = data[key] || ''
  })
  Object.assign(form, result)
}

const getSubmitForm = () => {
  return form
}

defineExpose({
  inputData,
  getSubmitForm,
})

const getNumber = (val) => {
  return isNaN(Number(val)) ? 0 : Number(val)
}

const helperObj = {
  totalAreaTotal: [
    'safeAreaTotal',
    'promoteAreaTotal',
    'changeNewAreaTotal',
    'newAreaTotal',
    'removeAreaTotal',
  ],
  totalAreaYear: [
    'safeAreaYear',
    'promoteAreaYear',
    'changeNewAreaYear',
    'newAreaYear',
    'removeAreaYear',
  ],
  totalCompleteTotal: [
    'selfGovernTotal',
    'superiorTotal',
    'companyTotal',
    'bankTotal',
    'otherFinanceTotal',
    'residentTotal',
    'otherWayTotal',
  ],
  totalCompleteYear: [
    'selfGovernYear',
    'superiorYear',
    'companyYear',
    'bankYear',
    'otherFinanceYear',
    'residentYear',
    'otherWayYear',
  ],
  manageTotalCount: [
    'manageRentCount',
    'manageSaleCount',
    'manageCount',
    'manageOtherCount',
  ],
  holidayTotalCount: [
    'holidayRentCount',
    'holidaySaleCount',
    'holidayManageCount',
    'holidayOtherCount',
  ],
  yearTotalCount: [
    'yearRentCount',
    'yearSaleCount',
    'yearManageCount',
    'yearOtherCount',
  ],
}

const getSumVal = (key) => {
  const arr = helperObj[key]
  if (!arr) return 0
  return (
    arr.reduce((prev, cur) => {
      return prev + getNumber(form[cur])
    }, 0) || ''
  )
}
</script>

<template>
  <el-row :gutter="24">
    <el-col
      v-for="(item, index) in renderTables"
      :key="index"
      :span="item.span"
      :class="item.extraClass"
    >
      <template v-if="item.renderType === 'input'">
        <template v-if="disabled">
          <div>{{ form[item.key] }}</div>
        </template>
        <el-input
          v-else
          type="number"
          :placeholder="item.placeholder"
          v-model="form[item.key]"
        />
      </template>
      <template v-else-if="item.key">
        <div>{{ getSumVal(item.key) }}</div>
      </template>
      <template v-else-if="item.renderType === 'text'">
        <div class="label">{{ item.label }}</div>
      </template>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.el-row {
  width: 100%;
  .header-style {
    background: #f5f7fa;
    color: #909399;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
  }

  .right-border {
    border-right: 1px solid #ebeef5;
  }

  .bottom-border {
    border-bottom: 1px solid #ebeef5;
  }

  .el-col {
    line-height: 45px;
    height: 45px;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;

    .el-input {
      height: 36px;
      line-height: 36px;
    }
    :deep(.el-input__inner) {
      height: 36px;
      line-height: 36px;
    }
  }

  .merge-top2 {
    position: relative;

    .label {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .merge-top6 {
    position: relative;

    .label {
      width: 100%;
      position: absolute;
      top: 90px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .merge-bottom {
    border-top: none;
  }
}
</style>
